<template>
  <Carousel
    :data="categoryList"
    :showNavigation="showNavigation"
    comName="Category"
    :options="{ slidesPerView: 5, slidesPerGroup: 5 }"
    class="category-swipper"
  >
    <template #default="{ data }">
      <div class="category-content">
        <div class="category-itemList" id="category-itemList">
          <div class="category-tag-list">
            <h3 class="tag-title">{{ data.categoryGroupName }}</h3>
            <i class="tag-line"></i>
            <ul class="tag-tags">
              <li
                class="tag-li"
                v-for="item in data.items"
                :key="item.categoryId"
              >
                <router-link
                  :to="`/category?t1=${item.categoryId}`"
                  class="tag-a"
                  >{{ item.categoryName }}</router-link
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </template>
  </Carousel>
</template>

<script lang="ts">
export default {
  name: 'HSwipper',
}
</script>

<script lang="ts" setup>
import Carousel from '@/components/Carousel/index.vue'
import { reactive, ref, onMounted } from 'vue'
import useRouter from 'vue-router'
import type {
  SongListCategoriesRes,
  CategoriesList,
} from '@/api/category/model/getSongListCategoriesModel'
import { getSongListCategoriesApi } from '@/api/category/getSongListCategories'

const showNavigation = ref(true)
const categoryList = ref<CategoriesList>([])
onMounted(async () => {
  const result = await getSongListCategoriesApi()
  // console.log(result)
  categoryList.value = result.data.categories
})
</script>

<style scoped>
.category-swipper {
  height: 190px;
  padding-top: 60px;
  position: relative;
}

.category-content {
  max-width: 1200px;
  overflow: hidden;
  margin: 0 auto;
  height: 109px;
}

.category-itemList {
  display: inline-flex;
}
.category-tag-list {
  position: relative;
  width: 238px;
  height: 174px;
  margin-right: 22px;
  border-right: 1px solid rgb(13, 13, 19);
}
.tag-title {
  color: #999;
  height: 26px;
  width: 238px;
  margin: 0;
  padding: 0;
}
.tag-line {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 1px;
  height: 108px;
  background-color: rgb(13, 13, 19);
}
.tag-tags {
  display: block;
  list-style-type: none;
  font-size: 14px;
}
.tag-li {
  font-size: 14px;
  width: 76px;
  height: 26px;
  white-space: nowrap;
  line-height: 26px;
  float: left;
}
.tag-a {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}
a {
  color: #000;
  cursor: pointer;
  text-decoration: none;
}
a:hover {
  color: rgb(49, 194, 124);
  text-decoration: none;
}
</style>
